Skip to main content

Shipping Your First Feature With LaunchDarkly

The code has been tested and we're ready to ship our new webstore to the Toggle Outfitters site. A lot of pressure is riding on this release, but you're cool as a cucumber because you're going to be using LaunchDarkly to safely ship your features.

The team has been hard at work building a new storefront for the Toggle Outfitters website. We're ready to test it in our production environment, and since we're using LaunchDarkly, we're able to safely test this feature release in production, instead of cycling between our test environments like we used to.

🎏 Creating our Store Release feature flag​

Before we get started, let's explain what a feature flag is, we're going to use a lot of them today. Feature flags are how we control how our code is executed. In this case, we're going to use feature flags to release new capabilities, migrate systems, collect experiment data, and more! A quick breakdown of the types of flags you can use:

  • Boolean: This is the flag type that most folks are familiar with. Most often it's used to specify which code block should run: when the flag is set to true run this, if it's false run something else.
  • String: Sometimes we want to have more choices than just true/false. We have have 3 or 4 variations. String flags let us return a string value to the code in order to do something. For instance, say I want to choose a red, blue, or yellow background. I could use a string flag to serve, red, blue or yellow, and render the code accordingly.
  • Number: Similar to string flags, but when we want different integer variations. Think like columns or rows in a table.
  • JSON Objects: Using key/value pairs can be helpful when updating code that utilizes variables. Think like updating the region or table name in an API. We can use flags to serve different variations if we're hitting multiple regions or switching between tables.

Step 1: Open your LaunchDarkly project, click create flag and input the following configurations:

Flag Name: Release Toggle Outfitters Updated Storefront
Flag Key:
Type: Boolean
Description: optional, if you would like to add
Tags: optional, if you would like to add
Client-Side SDK Availability:
Variations: true:, false:

Important Note!
The code used in this workshop requires specific flag keys, you must use the provided keys or the demo may not work as expected!

Once you have created the flag we are ready to launch!

🌎 Locate the new component​

To launch this site, we need to add the storelaunch component to our /src/pages/index.tsx file. Currently, this index file is rendering the /src/components/storepreview.tsx, which looks like:

Previously, we would replace our storepreview component with the new component, build a new file, and ship it out to our lower environments for testing for a few weeks.

Since we're using LaunchDarkly now, we can put this change behind a feature flag and control its rollout. Let's get started!

🚀 Dark Launching our Feature​

Now that we've successfully created our flag, we are ready to use that flag to launch our new feature. In order to release a feature with LaunchDarkly there are two things we need to do:

  1. Import the flag value from LaunchDarkly
  2. Run specific code depending on that value of that flag

Step 1: Locate the index.tsx file in the /src/pages directory.
Step 2: Add the following line of code in the appropriate place and save the file. Within our application code - you can see the commented lines around line 25 that indicate where to place this updated code:

{
  storeEnabled ? <StoreLaunch /> : <StorePreview />
}

Important Note
When you are copying these code blocks, make sure that you are using the copy code button in the upper right corner of the code block itself. Selecting the code manually may cause formatting errors or result in missed code.

If you did it correctly, you should see no change on our page, why? Well because we haven't enabled the flag, go ahead and turn the flag on in LaunchDarkly and see our brand new webstore! 🙌

Pretty neat right? But in reality, we probably don't want to make this webstore available to everyone until we've done some internal testing.

Let's disable the flag and move on to our next topic: Release Targeting!